<template>
  <div class="cameraTour">
    <div class="cameraTour-top">
      <span>
        漫游制作
      </span>
      <el-popover
          class="cameraTour-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="鼠标左键按住拖拽视角，鼠标右键按住旋转视角，每个视角最好是1-2s内能移动到。如果点击播放没反应，尝试点击编辑保存以解决问题">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="cameraTour-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="cameraTour-data">
      <el-form ref="cameraTourData" :model="cameraTourObj" label-width="100px">
        <el-form-item label="漫游" class="tour-select">
          <el-select v-model="cameraTourIndex" placeholder="请选择" @change="changeCameraTour">
            <el-option
                v-for="(item, index) in reportTour"
                :key="item.id"
                :label="item.name"
                :value=index>
            </el-option>
          </el-select>
          <el-button @click="playCameraTour()">播放</el-button>
        </el-form-item>
        <el-form-item label="漫游名称" class="tour-name">
          <el-input v-model="cameraTourObj.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="漫游视角">
          <el-button @click="saveKeyFrame()">保存视角</el-button>
        </el-form-item>
        <el-form-item label="帧坐标:" class="tour-frame">
          <div v-for="(item,index) in cameraTourObj.locations" :key=index>
            <span>{{ '[' + item[0] + ',' + item[1] + ',' + item[2] + ']' }}</span>
            <el-button @click="delFrame(index)">x</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="cameraTour-btn">
      <el-button @click="saveCameraTour()">新增漫游</el-button>
      <el-button @click="delCameraTour()">删除</el-button>
      <el-button @click="closeCameraTour()">关闭</el-button>
      <el-button @click="edtCameraTour()">编辑保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/cameraTour/cameraTour';
</style>
<script>
/* eslint-disable */
export default {
  name: "cameraTour",
  props: {
    reportTour: {
      type: Array,
    },
  },
  data() {
    return {
      cameraTourObj: {
        id: '',
        name: '',
        frames: [],
        locations: [],
      },
      cameraTourIndex: null,
    }
  },
  methods: {
    changeCameraTour() {
      this.cameraTourObj = this.reportTour[this.cameraTourIndex]
    },
    saveKeyFrame() {
      if (this.cameraTourObj.name.replace(/\s/g, '') === '') {
        this.$message.warning("没有输入漫游名称")
      } else {
        __g.camera.get().then((res) => {
          let x = Math.floor(res.x);
          let y = Math.floor(res.y);
          let z = Math.floor(res.z);
          let pitch = res.pitch;
          let yaw = res.yaw;
          this.cameraTourObj.locations.push([x, y, z, pitch, yaw]);
          this.$message.success("视角保存成功")
        });
      }
    },
    delFrame(index) {
      this.cameraTourObj.locations.splice(index, 1)
    },
    async saveCameraTour() {
      if (this.cameraTourObj.name.replace(/\s/g, '') === '') {
        this.$message.warning("没有输入漫游名称")
      } else {
        if (this.cameraTourObj.id !== '') {
          this.$message.warning("请点击编辑保存")
        } else {
          const timestamp = new Date().getTime();
          this.cameraTourObj.id = 'cameraTour' + timestamp
          let frames = []
          for (let i = 0; i < this.cameraTourObj.locations.length; i++) {
            frames.push(new CameraTourKeyFrame(i, i + 1, [this.cameraTourObj.locations[i][0], this.cameraTourObj.locations[i][1], this.cameraTourObj.locations[i][2],], [this.cameraTourObj.locations[i][3], this.cameraTourObj.locations[i][4], 0]));
          }
          this.cameraTourObj.frames = frames
          this.reportTour.push(JSON.parse(JSON.stringify(this.cameraTourObj)))
          let o = new CameraTourData(this.cameraTourObj.id, this.cameraTourObj.name, this.cameraTourObj.frames);
          await __g.cameraTour.add(o);
          this.cameraTourIndex = this.reportTour.length - 1
          this.$message.success("保存成功")
        }
      }
    },
    async edtCameraTour() {
      if (this.cameraTourObj.name.replace(/\s/g, '') === '') {
        this.$message.warning("没有输入漫游名称")
      } else {
        if (this.reportTour[this.cameraTourIndex].id === '') {
          this.$message.warning("新增的请点击新增漫游")
        } else {
          __g.cameraTour.delete(this.reportTour[this.cameraTourIndex].id);
          let frames = []
          for (let i = 0; i < this.cameraTourObj.locations.length; i++) {
            frames.push(new CameraTourKeyFrame(i, i + 1, [this.cameraTourObj.locations[i][0], this.cameraTourObj.locations[i][1], this.cameraTourObj.locations[i][2],], [this.cameraTourObj.locations[i][3], this.cameraTourObj.locations[i][4], 0]));
          }
          this.cameraTourObj.frames = frames
          let obj = JSON.parse(JSON.stringify(this.cameraTourObj))
          this.reportTour[this.cameraTourIndex].name = obj.name
          this.reportTour[this.cameraTourIndex].frames = obj.frames
          let o = new CameraTourData(this.cameraTourObj.id, this.cameraTourObj.name, this.cameraTourObj.frames);
          await __g.cameraTour.add(o);
          this.$message.success("编辑成功")
        }
      }
    },
    delCameraTour() {
      this.reportTour.splice(this.cameraTourIndex, 1);
      this.reloadCameraTour()
    },
    closeCameraTour() {
      this.$emit('close-popup');
      this.reloadCameraTour()
    },
    reloadCameraTour() {
      this.cameraTourObj = {
        id: '',
        name: '',
        frames: [],
        locations: []
      }
      this.cameraTourIndex = null
    },
    playCameraTour() {
      __g.cameraTour.play(this.cameraTourObj.id)
    },

  },
  mounted() {

  },
};
</script>
